import React from 'react';
import { Building2, Users, Award, TrendingUp } from 'lucide-react';

const Clients = () => {
  const clientStats = [
    { icon: <Building2 size={24} />, number: "3000+", label: "企业客户" },
    { icon: <Users size={24} />, number: "50+", label: "行业覆盖" },
    { icon: <Award size={24} />, number: "99.9%", label: "客户满意度" },
    { icon: <TrendingUp size={24} />, number: "200%", label: "平均效率提升" }
  ];

  const industries = [
    "零售电商", "地产建筑", "物流运输", "制造业", 
    "医疗健康", "金融服务", "政府机构", "教育培训"
  ];

  return (
    <section className="clients" id="clients">
      <div className="container">
        <h2>3000+企业客户选择我们</h2>
        <p>我们已成功助力零售、地产、物流、制造、医疗健康、金融和政府等行业的客户实现"云转型"</p>
        
        <div className="client-stats">
          {clientStats.map((stat, index) => (
            <div 
              key={index} 
              className="client-stat-item hover-lift"
            >
              <div className="client-stat-icon">
                {stat.icon}
              </div>
              <div className="client-stat-number">{stat.number}</div>
              <div className="client-stat-label">{stat.label}</div>
            </div>
          ))}
        </div>

        <div className="industries-section">
          <h3>服务行业</h3>
          <div className="industries-grid">
            {industries.map((industry, index) => (
              <div 
                key={index} 
                className="industry-tag"
              >
                {industry}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Clients;
